<template>
  <head>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <title>VideoPlayer</title>
  </head>
  <body>
    <div id="file_div">
      <div id="file_choose_div">
        <button @click="onchoosefile">选择需要播放的文件</button>
        <span>{{ state.currentTime }}</span>
      </div>

      <video
        id="video_div"
        ref="videoPlayer"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
        width="100%"
      >
        <source :src="blob" type="video/mp4" />
      </video>
    </div>
  </body>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
// import renderts from "./render/apprender";
import "video.js/dist/video-js.css";
import videojs from "video.js";

const state = reactive({
  currentTime: "00000",
});
const blob = ref("");

async function onchoosefile() {
  blob.value = await window.electronAPI.sendValue();
  onplayer();
}
function onplayer() {
  const videoplayer = videojs(document.querySelector(".video-js")!, {
    sources: [
      {
        src: blob.value,
        type: "video/mp4",
      },
    ],
    //播放速度
    playbackRates: [0.5, 1, 1.5, 2],
    //加载热键
    userActions: {
      hotkeys: {},
    },
  });
  document.addEventListener("keydown", (event: KeyboardEvent) => {
    if (event.key === "ArrowLeft") {
      // 左箭头键

      if (typeof videoplayer.currentTime() === "number") {
        if (videoplayer.paused()) {
          videoplayer.currentTime(videoplayer.currentTime() - 1);
          console.log(videoplayer.currentTime);
        }
      }
    } else if (event.key === "ArrowRight") {
      // 右箭头键
      if (typeof videoplayer.currentTime() === "number") {
        if (videoplayer.paused()) {
          videoplayer.currentTime(videoplayer.currentTime() + 1);
          console.log(videoplayer.currentTime);
        }
      }
    }
  });
  videoplayer.on("timeupdate", () => {
    const currentTimeInSeconds = videoplayer.currentTime();
    console.log(currentTimeInSeconds);
    if (typeof currentTimeInSeconds === "number") {
      state.currentTime = currentTimeInSeconds.toString();
    }
  });
}
</script>
